/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/10/25 1:44 下午
 * @version V1.0
 */
import React, { useRef } from 'react';
import { connect, history } from 'umi';
import { Button, Card, Col, Form, Input, message, Row } from 'antd';
import RichText from 'components/RichText';

const formItemLayout = {
    labelCol: { span: 5 }, // 左侧label宽度
    wrapperCol: { span: 16 }, // 右侧输入框等的宽度
};
const tailLayout = {
    wrapperCol: { offset: 5, span: 16 },
};
const { Item } = Form;
const EditArticle = ({ articleDetail: { articleDetail, content }, dispatch, loading }) => {
    const [form] = Form.useForm();
    const refRich = useRef();
    form.setFieldsValue({
        title: articleDetail.title,
    });

    const submit = () => {
        const content = refRich.current.cbRichHtml();
        if (content === '<p></p>') {
            message.warn('请填写内容');
            return;
        }
        form.validateFields().then(async values => {
            values.id = articleDetail._id;
            values.content = content;
            dispatch({
                type: 'articleDetail/updateArticle',
                payload: values,
                callback: (res) => {
                    history.push('/system-manage/article/list');
                },
            });
        }).catch(info => {
        });


    };
    if (loading) return null;
    return (
        <Card>
            <Form
                form={form}
                {...formItemLayout}
            >
                <Row>
                    <Col span={8}>
                        <Item
                            label="题目"
                            name="title"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入分类名称"/>
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item
                            label="内容"
                        >
                            <RichText
                                template={content}
                                refRich={refRich}
                            />
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item {...tailLayout}>
                            <Button type="primary" onClick={submit}>提交</Button>
                        </Item>
                    </Col>
                </Row>
            </Form>
        </Card>
    );
};


export default connect(({ articleDetail, dispatch, loading }) => ({
    articleDetail,
    dispatch,
    loading: loading.effects['articleDetail/getArticleDetail'],
}))(EditArticle);
